<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微电影管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/resource/static/admin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/fonts/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/admin/dist/css/AdminLTE.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/resource/static/admin/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/datepicker3.css">
    <style>
        * {
            font-family: "Microsoft YaHei";
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            vertical-align: middle;
            text-align: center;
        }

    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <%@ include file="../5-public/AdminSidebar.jsp" %>

    <div class="content-wrapper">
        <!--内容-->
        <section class="content-header">
            <h1 id="bb">微电影管理系统</h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 评论管理</a></li>
                <li class="active">评论列表</li>
            </ol>
        </section>
        <section class="content" id="showcontent">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">评论列表</h3>
                            <div class="box-tools">
                                <div class="input-group input-group-sm" style="width: 150px;">
                                    <input type="text" name="table_search" class="form-control pull-right"
                                           placeholder="请输入关键字..." id="tablesearch">

                                    <div class="input-group-btn">
                                        <button type="submit" class="btn btn-default" onclick="doGetComment(1)"><i
                                                class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body box-comments" id="box-body">
                            <c:forEach items="${pageInfo.list}" var="comment">
                                <div class="box-comment">
                                    <img class="img-circle img-sm"
                                    <c:choose>
                                    <c:when test="${comment.personImage!=null and comment.personImage!=''}">
                                         src="${pageContext.request.contextPath}/resource/static/base/person/${comment.personImage}"
                                    </c:when>
                                    <c:otherwise>
                                         src="${pageContext.request.contextPath}/resource/static/admin/dist/img/user3-128x128.jpg"
                                    </c:otherwise>
                                    </c:choose>
                                         alt="User Image">
                                    <div class="comment-text">
                                    <span class="username">
                                        ${comment.personName}
                                        <span class="text-muted pull-right">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                            ${comment.addtime}
                                        </span>
                                    </span>关于电影<a >《${comment.videoName}》</a>的评论：${comment.commentContent}
                                        <br><a class="label label-danger pull-right"
                                               onclick="deleteComment('${comment.commentId}','${comment.movieId}','${comment.videoName}')" >删除</a>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                        <%--                            <div class="box-comment">--%>
                        <%--                                <img class="img-circle img-sm"--%>
                        <%--                                     src="${pageContext.request.contextPath}/resource/static/admin/dist/img/user5-128x128.jpg" alt="User Image">--%>
                        <%--                                <div class="comment-text">--%>
                        <%--                                    <span class="username">--%>
                        <%--                                        小丽--%>
                        <%--                                        <span class="text-muted pull-right">--%>
                        <%--                                            <i class="fa fa-calendar" aria-hidden="true"></i>--%>
                        <%--                                            &nbsp;--%>
                        <%--                                            2017-01-01 12:00:00--%>
                        <%--                                        </span>--%>
                        <%--                                    </span>--%>
                        <%--                                    关于电影<a>《环太平洋》</a>的评论：xxx--%>
                        <%--                                    <br><a class="label label-danger pull-right">删除</a>--%>
                        <%--                                </div>--%>
                        <%--                            </div>--%>

                        <div class="box-footer clearfix" id="box-footer">
                            <ul class="pagination pagination-sm no-margin pull-right">
                                <li><a href="#" onclick="doGetComment(1)">首页</a></li>
                                <li>
                                    <c:choose>
                                        <c:when test="${pageInfo.isFirstPage}">
                                            <a href="javascript:void(0)" onclick="doGetComment(1)"
                                               aria-label="上一页"><span
                                                    aria-hidden="true">上一页</span></a>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pageNum - 1})"
                                               aria-label="上一页"><span
                                                    aria-hidden="true">上一页</span></a>
                                        </c:otherwise>
                                    </c:choose>
                                </li>
                                <c:choose>
                                <c:when test="${pageInfo.total!=0}">
                                <li>
                                    <a href="javascript:void(0)" id="pageNum"
                                       title="${pageInfo.pageNum}">${pageInfo.pageNum}/${pageInfo.pages}
                                    </a></li>
                                    <%--                                <li><a href="#" onclick="doGetComment(2)">2</a></li>--%>
                                    <%--                                <li><a href="#" onclick="doGetComment(3)">3</a></li>--%>
                                <li>
                                    </c:when>
                                    <c:otherwise>
                                <li>
                                    <a href="javascript:void(0)" id="pageNum"
                                       title="${pageInfo.pageNum}">${pageInfo.pages}/${pageInfo.pages}
                                    </a></li>
                                    <%--                                <li><a href="#" onclick="doGetComment(2)">2</a></li>--%>
                                    <%--                                <li><a href="#" onclick="doGetComment(3)">3</a></li>--%>
                                <li>
                                    </c:otherwise>
                                    </c:choose>

                                    <c:choose>
                                        <%--如果当前页和最大页数相等，说明是最后一页，下一页就不能加1；否则就加1--%>
                                    <c:when test="${pageInfo.pageNum >= pageInfo.pages}">
                                <li data-name="nextPage">
                                    <a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pages})"
                                       aria-label="下一页"><span
                                            aria-hidden="true">下一页</span></a>
                                </li>
                                </c:when>
                                <c:otherwise>
                                    <li data-name="nextPage">
                                        <a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pageNum + 1})"
                                           aria-label="下一页"><span
                                                aria-hidden="true">下一页</span></a>
                                    </li>
                                </c:otherwise>
                                </c:choose>
                                </li>
                                <li><a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pages})"
                                       aria-label="尾页">尾页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--内容-->
    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>版本</b> 1.0
        </div>
        <strong>版权 &copy; 2017-2018 归<a href="">xxx</a>.</strong> 所有
    </footer>
    <div class="control-sidebar-bg"></div>
</div>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/fastclick/fastclick.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/dist/js/app.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/dist/js/demo.js"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/admin/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"
        charset="UTF-8"></script>


</body>
<script>
    //删除留言
    function deleteComment(commentId,movieId,movieName) {
        var statu = confirm("确定删除吗?");
        if (!statu) {
            return false;
        }
            $.ajax({
                url: "/comment/deleteComment",
                type: "get",
                dataType: "json",
                data: {"commentId":commentId,"movieId":BigInt(movieId),"movieName":movieName},
                success: function (data) {
                    if (data.code == "200") {
                        var pageNum = $("#pageNum").attr('title');
                        //删除一条信息后，当前页面数据回显
                        alert("删除评论成功")
                        doGetComment(pageNum)
                    } else {
                        alert("删除失败");
                    }
                },
                error: function () {
                    alert("访问失败!");
                }
            });
    }
    //留言分页
    function doGetComment(page) {
        if (page == null) {
            page = 1;
        }

        //需要传递给后端参数，关键词，当前第几页page，每页多少个size
        var keyWord = $("#tablesearch").val();
        var data = {
            "pageNum": page,
            "pageSize": 6,
            "keyWord": keyWord
        }
        $.ajax({
            url: "/comment/homeComment",
            data: data,
            type: "get",
            dataType: "json",
            success: function (res) {
                console.log(res);
                // alert(res.msg);
                //获取产品数据
                var commentList = res.data.list;

                console.log(commentList)
                // document.getElementById('box-body').innerText = "";
                //  document.getElementById('box-body').remove()
                //清除留言页信息
                $("#box-body").empty();
                // $(".box-body box-comments").text();
                //循环处理每条产品数据，把每次分页的信息加入到页面进行展示
                for (var i = 0; i < commentList.length; i++) {
                    // li +=
                    updateCommentList(commentList[i]);
                    // li += commentList[i];
                }
                // console.log(li);
                // document.getElementById('aa').innerHTML = li;
                //分页页码的展示
                setCommentListPage(res.data);

            },
            error: function () {
                alert("小二正忙，一会再试111");
            }
        })
    }

    //留言信息展示的方法
    function updateCommentList(comment) {
var id=(comment.movieId).toString();
        var li = '<div class="box-comment">' +
            '<img class="img-circle img-sm" alt="User Image"';
        var li1 = '<div class="comment-text">' +
            '  <span class="username">' +
            comment.personName +
            ' <span class="text-muted pull-right">' +
            ' <i class="fa fa-calendar" aria-hidden="true"></i>' +
            '&nbsp;' +
            comment.addtime +
            ' </span>' +
            '</span>' +
            '关于电影<a >《' + comment.videoName + '》</a>的评论：' + comment.commentContent +
            "<br><a class='label label-danger pull-right'" +  "onclick='deleteComment(" +  comment.commentId + ','  + id + ','+ "\""+ comment.videoName  + "\"" + ")'" + ">删除</a>" +
            '  </div>' +

            ' </div>';
        if (comment.personImage != null&&comment.personImage !=="") {
            li = li+ 'src="${pageContext.request.contextPath}' + '/resource/static/base/person/' + comment.personImage + '">'+li1;
        } else {
            li = li + 'src="${pageContext.request.contextPath}' + '/resource/static/admin/dist/img/user3-128x128.jpg">'+li1;
        }

        $("#box-body").append(li);

        // return li;
    }

    //留言信息页码展示的方法
    function setCommentListPage(pageInfo) {
        var ul = $("#box-footer").children("ul")[0];
        $(ul).empty();
        var firstPage = '<li data-name="firstPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + 1 + ')" aria-label="首页"><span' +
            ' aria-hidden="true">首页</span></a>' +
            '</li>';

        var prePageNum = 0;
        if (pageInfo.pageNum <= 1) {
            prePageNum = 1;
        } else {
            prePageNum = pageInfo.pageNum - 1;
        }
        var prevPage = '<li data-name="prevPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + prePageNum + ')" aria-label="上一页"><span' +
            ' aria-hidden="true">上一页</span></a>' +
            '</li>';
        if (pageInfo.total > 0) {
            var pageThis = '<li class="pageThis">' +
                '<a href="javascript:void(0)" id="pageNum" title="' + pageInfo.pageNum + '">' + pageInfo.pageNum + '/' + pageInfo.pages + '</a>' +
                '</li>';
        } else {
            var pageThis = '<li class="pageThis">' +
                '<a href="javascript:void(0)" id="pageNum" title="' + pageInfo.pageNum + '">' + pageInfo.pages + '/' + pageInfo.pages + '</a>' +
                '</li>';
        }

        var nextPageNum = 0;
        if (pageInfo.pageNum >= pageInfo.pages) {
            nextPageNum = pageInfo.pages;
        } else {
            nextPageNum = pageInfo.pageNum + 1;
        }
        var nextPage = '<li data-name="nextPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + nextPageNum + ')" aria-label="下一页"><span' +
            ' aria-hidden="true">下一页</span></a>' +
            '</li>';

        var lastPage = '<li data-name="lastPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + pageInfo.pages + ')" aria-label="尾页"><span' +
            ' aria-hidden="true">尾页</span></a>' +
            '</li>';
        $(ul).append(firstPage)
        $(ul).append(prevPage)
        $(ul).append(pageThis)
        $(ul).append(nextPage)
        $(ul).append(lastPage)

    }

</script>
</html>